<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>SoundWave - 音乐平台</title>

	<!-- 优化外部资源：只引入必要的库和精简版本 -->
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/fontawesome.min.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/solid.min.css" rel="stylesheet">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>

	<style>
		/* 基础样式 */
		body {
			margin: 0;
			padding: 0;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #121a2e 0%, #1e3163 100%);
			overflow-x: hidden;
			position: relative;
		}

		/* 背景装饰 - 减少元素数量优化性能 */
		.bg-decoration {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			z-index: 0;
		}

		.music-note {
			position: absolute;
			color: rgba(255, 255, 255, 0.1);
			font-size: 2rem;
			animation: float 15s infinite ease-in-out;
			will-change: transform, opacity; /* 提示浏览器优化渲染 */
		}

		@keyframes float {
			0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
			50% { transform: translateY(-50px) rotate(10deg); opacity: 0.3; }
		}

		/* 音频波形动画 - 减少元素数量并优化动画 */
		.audio-wave {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120px;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			gap: 4px;
			z-index: 0;
		}

		.wave-bar {
			width: 4px;
			background: linear-gradient(to top, #3498db, #9b59b6);
			border-radius: 2px;
			animation: wave 1.5s infinite ease-in-out;
			will-change: height; /* 提示浏览器优化渲染 */
		}

		@keyframes wave {
			0%, 100% { height: 10px; }
			50% { height: calc(10px + var(--random-height, 50px)); }
		}

		/* 容器样式 */
		.auth-container {
			width: 420px;
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(15px);
			padding: 35px;
			border-radius: 16px;
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
			transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			position: relative;
			z-index: 1;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.auth-container:hover {
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
			transform: translateY(-5px);
		}

		/* 标题样式 */
		.auth-header {
			text-align: center;
			margin-bottom: 30px;
		}

		.auth-logo {
			color: #fff;
			font-size: 32px;
			font-weight: 700;
			margin-bottom: 8px;
			letter-spacing: 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
		}

		.auth-logo i {
			color: #9b59b6;
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.1); }
		}

		.auth-tagline {
			color: rgba(255, 255, 255, 0.6);
			font-size: 14px;
			letter-spacing: 0.5px;
		}

		/* 标签切换样式 */
		.tab-switch {
			display: flex;
			margin-bottom: 25px;
			position: relative;
		}

		.tab-indicator {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 50%;
			height: 3px;
			background: linear-gradient(90deg, #3498db, #9b59b6);
			border-radius: 3px;
			transition: all 0.3s ease;
		}

		.tab-btn {
			flex: 1;
			padding: 12px 0;
			background: none;
			border: none;
			font-size: 16px;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.6);
			cursor: pointer;
			position: relative;
			transition: color 0.3s ease;
			z-index: 1;
		}

		.tab-btn.active {
			color: #fff;
			font-weight: 600;
		}

		.tab-btn:hover:not(.active) {
			color: #bbb;
		}

		/* 表单样式 */
		.tab-content {
			display: none;
			transform: translateY(20px);
			opacity: 0;
			transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		.tab-content.active {
			display: block;
			transform: translateY(0);
			opacity: 1;
		}

		.form-group {
			margin-bottom: 22px;
			position: relative;
		}

		.form-label {
			display: block;
			margin-bottom: 8px;
			color: rgba(255, 255, 255, 0.8);
			font-weight: 500;
			font-size: 14px;
		}

		.form-control {
			width: 100%;
			padding: 14px 15px;
			background: rgba(255, 255, 255, 0.07);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			font-size: 15px;
			color: #fff;
			transition: all 0.3s ease;
			box-sizing: border-box;
		}

		.form-control::placeholder {
			color: rgba(255, 255, 255, 0.4);
		}

		.form-control:focus {
			border-color: #9b59b6;
			box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.2);
			outline: none;
			background: rgba(255, 255, 255, 0.1);
		}

		.form-icon {
			position: absolute;
			right: 15px;
			top: 42px;
			color: rgba(255, 255, 255, 0.4);
			transition: color 0.3s ease;
		}

		.form-control:focus + .form-icon {
			color: #9b59b6;
		}

		/* 按钮样式 */
		.btn-submit {
			width: 100%;
			padding: 14px;
			border: none;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-top: 10px;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.btn-submit::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
			transition: all 0.6s ease;
			z-index: -1;
		}

		.btn-submit:hover::before {
			left: 100%;
		}

		.btn-login {
			background: linear-gradient(90deg, #3498db, #2980b9);
			color: white;
		}

		.btn-login:hover {
			background: linear-gradient(90deg, #2980b9, #3498db);
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
		}

		.btn-register {
			background: linear-gradient(90deg, #9b59b6, #8e44ad);
			color: white;
		}

		.btn-register:hover {
			background: linear-gradient(90deg, #8e44ad, #9b59b6);
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
		}

		/* 悬浮提示消息样式 */
		.toast-message {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.9);
			padding: 15px 25px;
			border-radius: 8px;
			color: white;
			font-size: 16px;
			font-weight: 500;
			z-index: 1000;
			opacity: 0;
			pointer-events: none;
			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		}

		.toast-message.show {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

		.toast-success {
			background: rgba(46, 204, 113, 0.9);
		}

		.toast-error {
			background: rgba(231, 76, 60, 0.9);
		}

		/* 表单验证提示框 */
		.alert {
			display: none;
			padding: 12px 15px;
			margin-bottom: 20px;
			border-radius: 8px;
			font-size: 14px;
			animation: slideIn 0.3s ease;
			background: rgba(231, 76, 60, 0.1);
			color: #e74c3c;
			border: 1px solid rgba(231, 76, 60, 0.3);
		}

		@keyframes slideIn {
			from { transform: translateY(-10px); opacity: 0; }
			to { transform: translateY(0); opacity: 1; }
		}

		.close {
			background: none;
			border: none;
			font-size: 18px;
			cursor: pointer;
			color: inherit;
			float: right;
			margin-top: -3px;
			transition: transform 0.2s ease;
		}

		.close:hover {
			transform: scale(1.2);
		}

		/* 媒体查询 */
		@media (max-width: 576px) {
			.auth-container {
				width: 90%;
				padding: 25px;
			}

			.audio-wave {
				height: 80px;
			}
		}
	</style>

	<script>
		// 优化JS执行：使用DOMContentLoaded确保DOM加载完成后执行
		document.addEventListener('DOMContentLoaded', function() {
			// 创建悬浮提示元素
			const toast = document.createElement('div');
			toast.className = 'toast-message';
			document.body.appendChild(toast);

			// 标签切换功能
			const loginTab = document.getElementById('login-tab');
			const registerTab = document.getElementById('register-tab');
			const loginForm = document.getElementById('login-form');
			const registerForm = document.getElementById('register-form');
			const tabIndicator = document.querySelector('.tab-indicator');
			const alertElement = document.querySelector('.alert');

			loginTab.addEventListener('click', function() {
				loginTab.classList.add('active');
				registerTab.classList.remove('active');
				loginForm.classList.add('active');
				registerForm.classList.remove('active');
				tabIndicator.style.left = '0';
				alertElement.style.display = 'none';
			});

			registerTab.addEventListener('click', function() {
				registerTab.classList.add('active');
				loginTab.classList.remove('active');
				registerForm.classList.add('active');
				loginForm.classList.remove('active');
				tabIndicator.style.left = '50%';
				alertElement.style.display = 'none';
			});

			// 关闭提示框功能
			document.querySelector('.close').addEventListener('click', function() {
				alertElement.style.display = 'none';
			});

			// 登录功能
			document.getElementById('login-submit').addEventListener('click', function() {
				const username = document.getElementById('login-user').value;
				const password = document.getElementById('login-password').value;
				const submitBtn = this;

				if(username.trim() === '' || password.trim() === '') {
					showFormMessage('用户名或者密码不能为空！');
					return;
				}

				// 添加按钮加载效果
				submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
				submitBtn.disabled = true;

				// 使用fetch替代jQuery的ajax，减少依赖
				fetch('/user/login', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
				})
						.then(response => response.json())
						.then(data => {
							console.log('登录响应:', data);
							if(data.status === 0) {
								showToast('登录成功！即将跳转...', 'success');
								setTimeout(() => {
									window.location.href = 'list.html';
								}, 1000);
							} else {
								showFormMessage('登录失败：' + data.message);
								document.getElementById('login-password').value = '';
							}
						})
						.catch(error => {
							console.error('登录请求错误:', error);
							showFormMessage('登录请求失败，请稍后重试');
						})
						.finally(() => {
							// 恢复按钮状态
							submitBtn.innerHTML = '登录';
							submitBtn.disabled = false;
						});
			});

			// 注册功能
			document.getElementById('register-submit').addEventListener('click', function() {
				const username = document.getElementById('register-user').value;
				const password = document.getElementById('register-password').value;
				const confirmPassword = document.getElementById('register-confirm-password').value;
				const submitBtn = this;

				// 表单验证
				if(username.trim() === '') {
					showFormMessage('用户名不能为空！');
					return;
				}

				if(password.trim() === '') {
					showFormMessage('密码不能为空！');
					return;
				}

				if(password.length < 6) {
					showFormMessage('密码长度不能少于6位！');
					return;
				}

				if(password !== confirmPassword) {
					showFormMessage('两次输入的密码不一致！');
					return;
				}

				// 添加按钮加载效果
				submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
				submitBtn.disabled = true;

				// 使用fetch替代jQuery的ajax
				fetch('/user/register', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
				})
						.then(response => response.json())
						.then(data => {
							console.log('注册响应:', data);
							if(data.status === 0) {
								// 注册成功 - 显示悬浮提示
								showToast('注册成功！', 'success');

								// 延迟切换到登录表单
								setTimeout(() => {
									loginTab.click();
									// 填充用户名
									document.getElementById('login-user').value = username;
									// 清空注册表单
									document.getElementById('register-user').value = '';
									document.getElementById('register-password').value = '';
									document.getElementById('register-confirm-password').value = '';
								}, 1500);
							} else {
								// 注册失败 - 显示悬浮提示
								showToast('注册失败：' + data.message, 'error');
							}
						})
						.catch(error => {
							console.error('注册请求错误:', error);
							showToast('注册请求失败，请稍后重试', 'error');
						})
						.finally(() => {
							// 恢复按钮状态
							submitBtn.innerHTML = '注册';
							submitBtn.disabled = false;
						});
			});

			// 显示表单内的提示消息
			function showFormMessage(text) {
				alertElement.querySelector('#message').textContent = text;
				alertElement.style.display = 'block';

				// 添加抖动动画
				alertElement.classList.add('animate-shake');
				setTimeout(() => {
					alertElement.classList.remove('animate-shake');
				}, 500);

				// 3秒后自动隐藏
				setTimeout(() => {
					alertElement.style.opacity = '0';
					setTimeout(() => {
						alertElement.style.display = 'none';
						alertElement.style.opacity = '1';
					}, 500);
				}, 3000);
			}

			// 显示悬浮提示消息
			function showToast(text, type = 'success') {
				toast.classList.remove('toast-success', 'toast-error', 'show');
				toast.classList.add('toast-' + type);
				toast.textContent = text;

				// 显示提示
				setTimeout(() => {
					toast.classList.add('show');
				}, 10);

				// 2秒后隐藏
				setTimeout(() => {
					toast.classList.remove('show');
				}, 2000);
			}

			// 分批创建背景元素，避免一次性创建大量DOM
			function createBackgroundElements() {
				// 创建音符容器
				const notesContainer = document.createElement('div');
				notesContainer.className = 'bg-decoration';
				document.body.appendChild(notesContainer);

				const noteTypes = ['fa-music', 'fa-volume-up', 'fa-compact-disc'];
				let noteCount = 0;

				// 分批创建音符，每批创建2个
				const createNotesBatch = () => {
					if (noteCount < 8) { // 减少音符数量从12到8
						const note = document.createElement('i');
						const noteType = noteTypes[Math.floor(Math.random() * noteTypes.length)];
						note.className = `fas ${noteType} music-note`;
						note.style.left = `${Math.random() * 100}%`;
						note.style.top = `${Math.random() * 100}%`;
						note.style.animationDelay = `${Math.random() * 5}s`;
						note.style.fontSize = `${1 + Math.random() * 2}rem`;
						note.style.transform = `rotate(${Math.random() * 360}deg)`;
						notesContainer.appendChild(note);

						noteCount++;
						// 短暂延迟后创建下一个
						setTimeout(createNotesBatch, 50);
					} else {
						// 音符创建完成后创建波形
						createWaveElements();
					}
				};

				// 开始创建音符
				createNotesBatch();
			}

			// 创建波形元素
			function createWaveElements() {
				const waveContainer = document.createElement('div');
				waveContainer.className = 'audio-wave';
				document.body.appendChild(waveContainer);

				let barCount = 0;

				// 分批创建波形条，每批创建5个
				const createBarsBatch = () => {
					if (barCount < 50) { // 减少波形条数量从80到50
						const bar = document.createElement('div');
						bar.className = 'wave-bar';
						bar.style.setProperty('--random-height', `${Math.random() * 80 + 20}px`);
						bar.style.animationDelay = `${Math.random() * 1.5}s`;
						waveContainer.appendChild(bar);

						barCount++;
						// 非常短的延迟，几乎无缝但避免阻塞
						setTimeout(createBarsBatch, 10);
					}
				};

				// 开始创建波形条
				createBarsBatch();
			}

			// 输入框聚焦效果
			document.querySelectorAll('.form-control').forEach(input => {
				input.addEventListener('focus', function() {
					this.parentElement.classList.add('form-focused');
				});
				input.addEventListener('blur', function() {
					this.parentElement.classList.remove('form-focused');
				});
			});

			// 延迟创建背景元素，优先保证表单可交互
			setTimeout(createBackgroundElements, 300);
		});
	</script>
</head>
<body>
<div class="auth-container">
	<div class="auth-header">
		<div class="auth-logo">
			<i class="fas fa-music"></i>
			<span>SoundWave</span>
		</div>
		<div class="auth-tagline">发现属于你的音乐世界</div>
	</div>

	<!-- 切换标签 -->
	<div class="tab-switch">
		<div class="tab-indicator"></div>
		<button id="login-tab" class="tab-btn active">登录</button>
		<button id="register-tab" class="tab-btn">注册</button>
	</div>

	<!-- 表单内提示框（用于验证） -->
	<div class="alert">
		<button type="button" class="close">&times;</button>
		<span id="message"></span>
	</div>

	<!-- 登录表单 -->
	<div id="login-form" class="tab-content active">
		<div class="form-group">
			<label for="login-user" class="form-label">用户名</label>
			<input type="text" name="username" class="form-control" id="login-user" placeholder="请输入用户名"/>
			<i class="fas fa-user form-icon"></i>
		</div>

		<div class="form-group">
			<label for="login-password" class="form-label">密码</label>
			<input type="password" name="password" class="form-control" id="login-password" placeholder="请输入密码"/>
			<i class="fas fa-lock form-icon"></i>
		</div>

		<button id="login-submit" class="btn-submit btn-login">登录</button>
	</div>

	<!-- 注册表单 -->
	<div id="register-form" class="tab-content">
		<div class="form-group">
			<label for="register-user" class="form-label">用户名</label>
			<input type="text" name="username" class="form-control" id="register-user" placeholder="请设置用户名"/>
			<i class="fas fa-user-plus form-icon"></i>
		</div>

		<div class="form-group">
			<label for="register-password" class="form-label">密码</label>
			<input type="password" name="password" class="form-control" id="register-password" placeholder="请设置密码（至少6位）"/>
			<i class="fas fa-lock form-icon"></i>
		</div>

		<div class="form-group">
			<label for="register-confirm-password" class="form-label">确认密码</label>
			<input type="password" class="form-control" id="register-confirm-password" placeholder="请再次输入密码"/>
			<i class="fas fa-check-circle form-icon"></i>
		</div>

		<button id="register-submit" class="btn-submit btn-register">注册</button>
	</div>
</div>
</body>
</html>
